import React, {JSX, ReactNode, useCallback} from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import {Card} from '../../../kit/Card';
import {BasicText} from '../../../kit/text';
import {
  ContactIcon,
  PushIcon,
  ClearCacheIcon,
  CheckUpdateIcon,
  UserAgreementIcon,
  PrivacyIcon,
  OpenToRightIcon,
} from '../../../kit/icon';
import {useAppContext} from '../../../context/AppContext';
import {CustomSwitch} from '../../../kit/switch';
import { normalize } from '../../../utils/adapter';

 type MenuItemProps = {
  icon: ReactNode;
  name: string;
  right?: ReactNode;
  isShowOpenToRight?: boolean;
  borderBottomWidth: number
  onPress?: (evt: string) => void;
};


type Props = {
  onPress:(evt: string)=>void
};


const TitleView = React.memo(() => (
  <View style={styles.title_container}>
    <BasicText color="#333333">常用功能</BasicText>
  </View>
));

const MenuItem = React.memo((props: MenuItemProps) => {
  return (
    <TouchableOpacity
      style={[styles.menu_item,{borderBottomWidth:props.borderBottomWidth}]}
      onPress={() => props.onPress && props?.onPress(props.name)}>
      <View style={styles.menu_name}>
        <View style={styles.menu_icon}>{props.icon}</View>
        <BasicText color="#333" fontSize={normalize(14)}>
          {props.name}
        </BasicText>
      </View>
      <View style={styles.right}>
        {props.right}
        {props.isShowOpenToRight && <OpenToRightIcon size="14" fill="#EDEDED"/>}
      </View>
    </TouchableOpacity>
  );
});

const Switch = React.memo(() => {
  const appCtx = useAppContext();

  const onChange = useCallback(() => {
    appCtx?.setIsOpenPush(!appCtx.state.isOpenPush);
  }, [appCtx]);

  return (
    <CustomSwitch
      value={appCtx?.state.isOpenPush as boolean}
      onValueChange={onChange}
    />
  );
});

function Menu({onPress}: Props): JSX.Element {
  const appCtx = useAppContext();
  return (
    <Card Y={-58}>
      <View style={styles.card_root_container}>
        <TitleView />
      </View>
      <View>
        <MenuItem
          icon={<ContactIcon size="24" />}
          name="联系我们"
          isShowOpenToRight={true}
          borderBottomWidth={1}
          onPress={onPress}
        />
        <MenuItem
          icon={<PushIcon size="24" />}
          name="个性化推送"
          right={<Switch />}
          isShowOpenToRight={false}
          borderBottomWidth={1}
          onPress={onPress}
        />
        <MenuItem
          icon={<ClearCacheIcon size="24" />}
          onPress={onPress}
          name="清除缓存"
          borderBottomWidth={1}
          isShowOpenToRight={true}
        />
        <MenuItem
          icon={<CheckUpdateIcon size="24" />}
          name="检查更新"
          right={
            <BasicText color="#999999" fontSize={14}>
              {appCtx?.state.versionName}
            </BasicText>
          }
          isShowOpenToRight={true}
          borderBottomWidth={1}
          onPress={onPress}
        />
        <MenuItem
          icon={<UserAgreementIcon size="24" />}
          name="用户协议"
          borderBottomWidth={1}
          isShowOpenToRight={true}
          onPress={onPress}
        />
        <MenuItem
          icon={<PrivacyIcon size="24" />}
          name="隐私协议"
          isShowOpenToRight={true}
          borderBottomWidth={0}
          onPress={onPress}
        />
      </View>
    </Card>
  );
}

const styles = StyleSheet.create({
  card_root_container: {
    paddingHorizontal: normalize(12),
  },
  title_container: {
    paddingTop: normalize(20),
  },
  menu_item: {
    flexDirection: 'row',
    marginHorizontal: normalize(12),
    paddingVertical: normalize(18),
    borderBottomColor: '#DDDDDD',
    borderStyle: 'solid',
    justifyContent: 'space-between',
  },
  menu_name: {
    flexDirection: 'row',
  },
  menu_icon: {
    marginRight: normalize(10),
  },
  right:{
    flexDirection:'row',
    alignItems:'center',
  },
});

export default Menu;
